/*
 * @Author: xiaosihan 
 * @Date: 2024-10-06 12:51:10 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-06 17:31:25
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./companyInfo.module.less";
import { Button, Cascader, CascaderProps, Form, Input, Select } from "antd";
import factoryStore from "@views/factory/factoryStore";
import axios from "axios";
import ImgItem from "./ImgItem/ImgItem";
import utils from "@utils";
import utilsApi from "@api/utilsApi";
import { values } from "lodash";
const { Option } = Select;

interface Iprops {
    children?: ReactNode
}

// 完善公司基本信息
export default function CompanyInfo(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [logo, setLogo] = useState("./logo2.png");
    const [chinaJSON, setChinaJSON] = useState<any>([]);
    const [form] = Form.useForm();

    useEffect(() => {
        (async () => {
            const res = await axios.get("./china.json");
            setChinaJSON(res.data);
        })();
    }, []);

    useEffect(() => autorun(() => {

    }, { delay: 10 }), []);

    type FieldType = {
        addr?: string,
        street?: string,
        logo?: string;
        businessLicense?: string;
        auth?: Array<string>;
        authImgs?: Array<string>;
        nature?: string
    };

    //上一步
    const prev = () => {
        factoryStore.setLoginStatus("accountInfo");
    }

    // 下一步
    const next = () => {
        form.validateFields()
            .then(async () => {
                factoryStore.setLoginStatus("made");
            }).catch(err => {
            })
    }

    const residences = [
        {
            value: 'china',
            label: '中国',
            children: chinaJSON,
        }
    ];

    return (
        <div
            ref={dom}
            className={styles.companyInfo}
        >
            <div className={styles.title}>山欢水笑（成都）科技有限公司</div>
            <div className={styles.subTitle}>请填写真实的个人信清晰完善的公司信息，是您公司综合实力的展示，是客户选择的重要依据。</div>

            <Form
                form={form}
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                initialValues={{
                    authImgs: []
                }}
                autoComplete="off"
            >
                <div className={styles.subT} >重要信息</div>
                <Form.Item
                    name="addr"
                    label="地址"
                    rules={[
                        { type: 'array', required: true, message: '请选择地区!' },
                    ]}
                >
                    <Cascader
                        className={styles.scelect}
                        options={residences}
                    />
                </Form.Item>

                <Form.Item
                    name="street"
                    label="街道地址"
                    rules={[
                        { required: true, message: '请输入详细街道地址!' },
                    ]}
                >
                    <Input className={styles.input} placeholder="输入详细街道地址" size="large" />
                </Form.Item>

                <div className={styles.subT} >公司基本信息</div>

                <Form.Item<FieldType>
                    name="logo"
                    label="公司logo"
                    rules={[{ required: true, message: '公司logo不能为空' }]}
                >
                    <ImgItem
                        src={logo}
                        onClose={() => {
                            setLogo("");
                            form.setFieldValue("logo", "");
                        }}
                        onClick={async () => {
                            const blobUrl = await utils.selectFileToBlob();
                            if (!blobUrl) return;
                            setLogo(blobUrl);
                            form.setFieldValue("logo", blobUrl);
                            form.validateFields();
                        }}
                    />
                </Form.Item>

                <Form.Item<FieldType>
                    name="businessLicense"
                    label="营业执照"
                    rules={[{ required: true, message: '营业执照不能为空' }]}
                >
                    <ImgItem
                        onClose={() => { }}
                        onClick={async () => {
                            const imgFile = await utils.selectFile();
                            if (!imgFile) return;
                            const url = await utilsApi.uploadOss(imgFile);
                            if (!url) return;
                        }}
                    />
                </Form.Item>

                <div className={styles.subT} >联系方式</div>

                <Form.Item<FieldType>
                    name="auth"
                    label="认证资质"
                    rules={[{ type: 'array' }]}
                >
                    <Select
                        className={styles.scelect}
                        mode="multiple"
                        placeholder="请选择认证资质"
                    >
                        <Option value="ISO9001">ISO9001</Option>
                        <Option value="ISO9009">ISO9009</Option>
                    </Select>
                </Form.Item>

                <Form.Item<FieldType>
                    name="authImgs"
                    label="认证资质照片"
                    rules={[]}
                >
                    {["./logo2.png"].map((url, i) => {
                        return (
                            <ImgItem
                                key={i}
                                src={url}
                                onClick={async () => {
                                    const imgFile = await utils.selectFile();
                                    if (!imgFile) return;
                                    const url = await utilsApi.uploadOss(imgFile);
                                    if (!url) return;
                                }}
                            />
                        );
                    })}
                    <ImgItem
                        onClick={async () => {
                            const imgFile = await utils.selectFile();
                            if (!imgFile) return;
                            const url = await utilsApi.uploadOss(imgFile);
                            if (!url) return;
                        }}
                    />
                </Form.Item>

                <Form.Item
                    name="nature"
                    label="公司性质"
                    rules={[
                        { required: true, message: '请选择公司性质' },
                    ]}
                >
                    <Select
                        className={styles.scelect}
                        placeholder="请选择公司性质"
                    >
                        <Option value="counst">国企</Option>
                        <Option value="previte">私营</Option>
                        <Option value="indi">个体工商户</Option>
                    </Select>
                </Form.Item>

            </Form>

            <div className={styles.btns} >
                <Button
                    onClick={() => {
                        prev();
                    }}
                >
                    &nbsp;上一步&nbsp;
                </Button>
                &nbsp;
                <Button
                    type="primary"
                    onClick={() => {
                        next();
                    }}
                >
                    &nbsp;下一步&nbsp;
                </Button>
            </div>

        </div>
    );

}